<template>
  <div id="app">
    <!-- <div class="row">
      <fy-button disabled @click="fn">按钮</fy-button>
      <fy-button type="primary">按钮</fy-button>
      <fy-button type="success">按钮</fy-button>
      <fy-button type="info">按钮</fy-button>
      <fy-button type="warning">按钮</fy-button>
      <fy-button type="danger">按钮</fy-button>
    </div>
      <div class="row">
      <fy-button plain>按钮</fy-button>
      <fy-button plain type="primary">按钮</fy-button>
      <fy-button plain type="success">按钮</fy-button>
      <fy-button plain type="info">按钮</fy-button>
      <fy-button plain type="warning">按钮</fy-button>
      <fy-button plain type="danger">按钮</fy-button>
    </div>
      <div class="row">
      <fy-button plain round>按钮</fy-button>
      <fy-button plain round type="primary">按钮</fy-button>
      <fy-button plain round type="success">按钮</fy-button>
      <fy-button plain round type="info">按钮</fy-button>
      <fy-button plain round type="warning">按钮</fy-button>
      <fy-button plain round type="danger">按钮</fy-button>
    </div>
    <div class="row">
      <fy-button plain circle>
        钮</fy-button>
      <fy-button plain circle type="primary">钮</fy-button>
      <fy-button plain circle type="success">钮</fy-button>
      <fy-button plain circle type="info">钮</fy-button>
      <fy-button plain circle type="warning">钮</fy-button>
      <fy-button plain circle type="danger">钮</fy-button>
    </div>
     <div class="row">
      <fy-button plain icon="bluetoothoff" circle></fy-button>
      <fy-button plain icon="bluetoothoff" circle type="primary"></fy-button>
      <fy-button plain icon="bluetoothoff" circle type="success"></fy-button>
      <fy-button plain icon="bluetoothoff" circle type="info"></fy-button>
      <fy-button plain icon="bluetoothoff" circle type="warning"></fy-button>
      <fy-button plain icon="bluetoothoff" circle type="danger"></fy-button>
    </div> -->
    <!-- <fy-dialog width="60%" top="300px" :visible.sync="visible"></fy-dialog>
    <fy-dialog title="温馨提示"></fy-dialog> -->
    <!-- <fy-dialog >
      <template v-slot:title>
        <h3>我是标题</h3>
      </template>
    </fy-dialog> -->
    <!-- <fy-dialog>
      <template v-slot:footer>
        <fy-button type="primary" @click="visible = false">确定</fy-button>
        <fy-button @click="visible = false">取消</fy-button>
      </template>
    </fy-dialog> -->
    <!-- <demo :visible="visible" :money="money" @update:money="fn1"></demo>
     <demo :money.sync="money"></demo> -->
    <!-- <demo :visible.sync="visible" :money.sync="money"></demo> -->
    <!-- <transition name="aa">
      <div v-show="visible"></div>
    </transition> -->
    <!-- <fy-input placeholder="请输入用户名" type="password" name="username" disabled></fy-input> -->
    <!-- <fy-input
      placeholder="请输入用户名"
      v-model="username"
      clearable
    ></fy-input>
    <fy-input
      placeholder="请输入用户名"
      type="password"
      v-model="username"
      show-password
    ></fy-input>
    <fy-input
      placeholder="请输入用户名"
      v-model="username"
      type="password"
    ></fy-input> -->
    <fy-switch v-model="active"></fy-switch>
     <fy-switch v-model="active" active-color="#13ce66" inactive-color="green"></fy-switch>
  </div>
</template>
<script>
import demo from "./demo/demo.vue";
export default {
  data() {
    return {
      username: "zs",
    };
  },
  components: {
    demo,
  },
  methods: {
    close(value) {
      this.visible = value;
    },
    fn1(value) {
      this.money = value;
    },
  },
};
</script>

<style lang="scss" scoped>
.aa-enter {
  opacity: 0;
}
.aa-enter-to {
  opacity: 1;
}
.aa-enter-active {
  transition: all 0.5s;
}
.aa-leave {
  opacity: 1;
}
.aa-leave-to {
  opacity: 0;
}
.aa-leave-active {
  transition: all 0.5s;
}
.aa-enter-active {
  animation: run 0.5s;
}
.aa-leave-active {
  animation: run 0.5s reverse;
}

@keyframes run {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.row {
  margin-bottom: 20px;
  .fy-button {
    margin-right: 20px;
  }
}
</style>
